<!-- 
文件名称: role_management.html
完整存储路径: frontend/templates/role_management.html
功能说明: 
    角色管理页面，展示角色列表，支持创建、编辑、删除角色。页面风格与用户管理完全一致。
    表单字段可根据实际角色模型调整。
使用说明:
    通过AJAX请求从后端API获取角色数据并展示，支持对角色的增删改操作。
    后端接口需要提供相应的API支持。
-->

{% extends "layouts/base.html" %}
{% block title %}角色管理 - 近视预防干预系统{% endblock %}
{% block content %}
<main class="main-content-container">
  <div class="user-management-content">
    <h1>角色管理</h1>
    <button id="createRoleBtn" class="btn btn-primary">创建角色</button>
    <table class="table user-table">
      <thead>
        <tr>
          <th>角色名</th>
          <th>描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="roleList"></tbody>
    </table>
    <div id="createRoleForm" class="modal" style="display: none">
      <div class="modal-content role-edit-modal">
        <h2 id="modalTitle">创建新角色</h2>
        <span class="close" onclick="closeRoleModal()">&times;</span>
        <form id="createRoleFormElement">
          <input type="hidden" id="editRoleId" />
          
          <!-- 基本信息区域 -->
          <div class="role-basic-info">
            <div class="form-group">
              <label for="roleName">角色名</label>
              <input type="text" id="roleName" name="roleName" required class="form-control" />
            </div>
            <div class="form-group">
              <label for="roleDesc">描述</label>
              <input type="text" id="roleDesc" name="roleDesc" class="form-control" />
            </div>
          </div>
          
          <!-- 权限分配区域 -->
          <div id="permissionAssignment" class="permission-assignment" style="display: none;">
            <h3>权限分配</h3>
            <div class="permission-summary">
              <span id="permissionSummary">已选择 0 个权限</span>
              <button type="button" class="btn btn-sm btn-secondary" onclick="toggleAllPermissions()">全选/取消全选</button>
            </div>
            <div id="permissionGroups" class="permission-groups">
              <!-- 权限分组将通过JavaScript动态加载 -->
            </div>
          </div>
          
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">保存</button>
            <button type="button" class="btn btn-secondary" onclick="closeRoleModal()">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</main>
{% endblock %}
{% block styles %} {{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/user_management.css') }}" />
{% endblock %}
{% block scripts %} {{ super() }}
<script src="{{ url_for('static', filename='js/api-utils.js') }}"></script>
<script src="{{ url_for('static', filename='js/permission_control.js') }}"></script>
<script src="{{ url_for('static', filename='js/role_management.js') }}"></script>
{% endblock %}

